<template>
  <view class="wrapper">
    <view class="content">
      <u-cell-group>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="c-99 m-r-10"> 名称: </view>
            <view class="flex-1">
              <u--input
                v-model="listData.name"
                placeholder="请输入内容"
                border="none"
              ></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="c-99 m-r-10"> 欠款: </view>
            <view class="flex-1">
              <u--input
                type="number"
                v-model="listData.originDebt"
                placeholder="请输入内容"
                border="none"
              ></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex" @click="lengthShow = true">
            <view class="c-99 m-r-10"> 布匹: </view>
            <view class="flex-1">{{ listData.typeName }}</view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex">
            <view class="c-99 m-r-10"> 信誉额: </view>
            <view class="flex-1">
              <u--input
                type="number"
                v-model="listData.creditAmount"
                placeholder="请输入内容"
                border="none"
              ></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              goRout('/pages/application/pages/personnel/staff/staff', {
                isJump: true,
              })
            "
          >
            <view class="c-99 m-r-10"> 业务员: </view>
            <view class="flex-1">{{ listData.employeeName }} </view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              goRout(
                '/pages/application/pages/personnel/components/customer-category'
              )
            "
          >
            <view class="c-99 m-r-10"> 分类: </view>
            <view class="flex-1">{{ listData.catName }}</view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view slot="title" class="flex" @click="weightShow = true">
            <view class="c-99 m-r-10"> 门店: </view>
            <view class="flex-1">{{ listData.shopName }}</view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              goRout(
                '/pages/application/pages/personnel/components/payment-method'
              )
            "
          >
            <view class="c-99 m-r-10"> 结款方式: </view>
            <view class="flex-1">{{ listData.settlementTypeName }}</view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              goRout(
                '/pages/application/pages/personnel/components/age-price-profile'
              )
            "
          >
            <view class="c-99 m-r-10"> 价格模式: </view>
            <view class="flex-1">{{ listData.priceModelName }}</view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex" @click="orgTypeOptionShow = true">
            <view class="c-99 m-r-10"> 组织性质: </view>
            <view class="flex-1">{{ listData.orgTypeName }}</view>
          </view>
        </u-cell>

        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              toDetail('')
            "
          >
            <view class="c-99 m-r-10"> 标签: </view>
            <view class="flex">
              <view
                v-for="(item, index) in listData.customerLabelList"
                :key="index"
              >
                <u-avatar
                  shape="square"
                  style="
                    width:auto;
                    min-width: 40px;
                    padding: 0 20rpx;
                    height: 48rpx;
                    border-radius: 0;
                    margin-left:5px;

                  "
                  :text="item.labelName"
                  fontSize="12"
                ></u-avatar>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view
            slot="title"
            class="flex"
            @click="
              goRout(
                '/pages/application/pages/personnel/components/type-of-goods-produced'
              )
            "
          >
            <view class="c-99 m-r-10"> 做货类型: </view>
            <view class="flex-1"> {{ listData.goodsTypeName }} </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right" v-if="isMore">
          <view slot="title" class="flex">
            <view class="w-100 c-99 m-r-10"> 设置: </view>
            <view class="flex">
              <view class="flex m-r-20">
                <u-switch v-model="listData.isEnable" size="18"></u-switch
                ><text class="m-l-10">是否启用</text>
              </view>
              <view class="flex">
                <u-switch v-model="listData.isInvoice" size="18"></u-switch
                ><text class="m-l-10">是否开票</text>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right" v-if="isMore">
          <view slot="title" class="flex">
            <view class="c-99 m-r-10"> 编号: </view>
            <view class="flex-1">
              <u--input
                v-model="listData.code"
                placeholder="请输入内容"
                border="none"
              ></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right" v-if="isMore">
          <view slot="title" class="flex">
            <view class="c-99 m-r-10"> 备注: </view>
            <view class="flex-1">
              <u--input
                v-model="listData.remarks"
                placeholder="请输入内容"
                border="none"
              ></u--input>
            </view>
          </view>
        </u-cell>
        <view
          class="flex more-view"
          @click="
            () => {
              isMore = !isMore;
            }
          "
        >
          <template v-if="isMore">
            <u-icon name="arrow-up" color="#ccc"></u-icon>
            <text class="m-l-16">隐藏属性</text>
          </template>
          <template v-else>
            <u-icon name="arrow-down" color="#ccc"></u-icon>
            <text class="m-l-16">更多属性</text>
          </template>
        </view>
      </u-cell-group>
    </view>
    <!-- 选择器 -->
    <!-- 门店 -->
    <cxPopupNotification
      :type="listData.shopId"
      :clothArray="weightColumns"
      :show="weightShow"
      @onLikeClose="(() =>{weightShow = false})"
      @onCheck="
        (e) => {
          (listData.shopName = e.label),
            (listData.shopId = e.value),
            (weightShow = false);
        }
      "
    >
    </cxPopupNotification>

    <!-- 时间选择 -->
    <u-calendar
      :show="calendarShow"
      :mode="calendarMode"
      @confirm="calendarConfirm"
    ></u-calendar>
    <cxPopupNotification
      :type="listData.type"
      :clothArray="lengthColumns"
      :show="lengthShow"
      @onLikeClose="(() =>{lengthShow = false})"
      @onCheck="
        (e) => {
          listData.typeName = e.label,
            listData.type = e.value,
            lengthShow = false;
        }
      "
    >
    </cxPopupNotification>

    <cxPopupNotification
      :type="listData.orgType"
      :clothArray="orgTypeOptionColumns"
      :show="orgTypeOptionShow"
      @onLikeClose="(() =>{orgTypeOptionShow = false})"
      @onCheck="
        (e) => {listData.orgTypeName = e.label,listData.orgType = e.value,orgTypeOptionShow = false}
      "
    >
    </cxPopupNotification>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import cxPopupNotification from "@/components/cx-popup-notification/cx-popup-notification";
import {
  getKeHuTypeData,
  getMenDianData,
  getOrgTypeOptionsData,
} from "@/apis/bill/information/custom";
export default {
  components: {
    clIcon,
    cxPopupNotification,
  },
  data() {
    return {
      isMore: false,
      calendarShow: false,
      calendarMode: "single",

      lengthShow: false,
      lengthColumns: [],

      weightShow: false,
      weightColumns: [],

      orgTypeOptionShow: false,
      orgTypeOptionColumns: [],

      config: {
        title: "产品",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        // code: "", //编号
        // name: "", //名称
        // type: null, //布匹id
        // typeName: "", //布匹
        // originDebt: null, //欠款
        // creditAmount: null, //信用额度
        // employeeName: "", //业务员name
        // employeeId: "", //业务员id
        // catName: "", //分类
        // catId: "", //分类

        // shopName: "", //门店
        // shopId: "", //门店
        // settlementTypeName: "", //结款方式
        // settlementTypeId: "", //结款方式

        // priceModelName: null, //价格模式
        // priceModelId: null, //价格模式

        // orgType: null, //组织性质
        // orgTypeName: "", //组织性质
        // labels: [], //标签
        // goodsTypeName: "", //做货类型
        // goodsTypeId: "", //做货类型
        // isInvoice: true, // 是否开票
        // isEnable: true, // 是否开启
        // remarks: "", // 备注
      },
      fileListProductList: [],
      fileListColorCard: [],
      // checkboxList1: [],
    };
  },
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  computed: {},
  watch: {
    data(n, o) {
      this.listData = n;
    },
  },
  created() {
    // this.listData = this.data
    this.getKeHuTypeDatas();
    this.getMenDianDatas();
    this.getOrgTypeOptionsDatas();
    // this.getlabelForCustomerDatas();
  },
  onShow() {},

  methods: {
    goRout(item, query = {} || []) {
      this.$Router.push({
        path: item,
        query: query,
      });
    },
    toDetail() {
			uni.navigateTo({
				url: '/pages/application/pages/personnel/components/label-page?item='+ encodeURIComponent(JSON.stringify(this.listData.customerLabelList))
			})
		},
    // getlabelForCustomerDatas() {
    //   getlabelForCustomerData().then((res) => {
    //     if (!res.flag) return;
    //     const data = res.data || {};
    //     this.checkboxList1 = data;
    //   });
    // },

    getOrgTypeOptionsDatas() {
      getOrgTypeOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.orgTypeOptionColumns = data;
      });
    },
    getMenDianDatas() {
      getMenDianData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.weightColumns = data;
      });
    },
    // 获取数据
    getKeHuTypeDatas() {
      getKeHuTypeData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.lengthColumns = data;
      });
    },
    calendarConfirm(e) {
      this.calendarShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #fff;

  .content {
    flex: 1;
    overflow-y: scroll;
  }
  .more-view {
    height: 80rpx;
    background: #f1f1f1;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 28rpx;
  }
  .btns {
  }
}
</style>